<template>
  <div class="data-center-hierarchy-table">
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>类型</th>
          <th>U位总数</th>
          <th>已用U位</th>
          <th>承重（kg）</th>
          <th>功耗（W）</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(room, index) in data" :key="index">
          <td @click="toggle(room)">
            {{ room.expanded ? "▼" : "▶" }} {{ room.name }}
          </td>
          <td>{{ room.type }}</td>
          <td>{{ room.uTotal }}</td>
          <td>{{ room.uUsed }}</td>
          <td>{{ room.weight }}</td>
          <td>{{ room.power }}</td>
        </tr>
        <tr v-for="(room, rIndex) in data" :key="'child-' + rIndex">
          <td colspan="6">
            <!-- 使用 template 包裹并把 v-if 移到外层 -->
            <template v-if="room.expanded && room.children">
              <table class="nested-table">
                <tbody>
                  <tr
                    v-for="(area, aIndex) in room.children"
                    :key="'area-' + aIndex"
                  >
                    <td @click="toggle(area)">
                      {{ area.expanded ? "▼" : "▶" }} {{ area.name }}
                    </td>
                    <td>{{ area.type }}</td>
                    <td>{{ area.uTotal }}</td>
                    <td>{{ area.uUsed }}</td>
                    <td>{{ area.weight }}</td>
                    <td>{{ area.power }}</td>
                  </tr>
                  <!-- 同样的方式处理子项 -->
                  <tr
                    v-for="(area, aIndex) in room.children"
                    :key="'cabinet-' + aIndex"
                  >
                    <td colspan="6">
                      <template v-if="area.expanded && area.children">
                        <table class="nested-table">
                          <tbody>
                            <tr
                              v-for="(cabinet, cIndex) in area.children"
                              :key="'cabinet-' + cIndex"
                            >
                              <td>{{ cabinet.name }}</td>
                              <td>{{ cabinet.type }}</td>
                              <td>{{ cabinet.uTotal }}</td>
                              <td>{{ cabinet.uUsed }}</td>
                              <td>{{ cabinet.weight }}</td>
                              <td>{{ cabinet.power }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </template>
                    </td>
                  </tr>
                </tbody>
              </table>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "DataCenterHierarchyTable",
  props: {
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    toggle(item) {
      if (item.children) {
        item.expanded = !item.expanded;
      }
    },
  },
};
</script>

<style scoped>
.data-center-hierarchy-table table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}

.data-center-hierarchy-table th,
.data-center-hierarchy-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.nested-table td {
  padding-left: 20px;
}
</style>
